<!--
 * @Description: 重要新闻组件
 * @Author: Huang Junjie
 * @Date: 2021-04-22 13:52:51
 * @LastEditTime: 2021-09-08 19:14:30
 * @LastEditors: Huang Junjie
-->
<template>
  <div class="important-news-style">
    <div class="component-inner-div">
      <!-- 四角样式 -->
      <div class="the-four-border the-four-border-01" />
      <div class="the-four-border the-four-border-02" />
      <div class="the-four-border the-four-border-03" />
      <div class="the-four-border the-four-border-04" />
      <!-- 四角样式 -->

      <!-- 标题栏 -->
      <div class="title">
        <div class="point-icon" />
        <span class="title-span">重要新闻</span>
        <!-- <img
          class="title-background"
          :src="require('@/assets/images/jjxt/index/jjxt-index-title-background.png')"> -->
        <div
          class="more-btn"
          @click="goToArticleMoreView"
        >
          更多
          <i class="el-icon-arrow-right" />
        </div>
      </div>
      <!-- 标题栏 -->

      <!-- 重要新闻列表 -->
      <div class="news-list-banner">
        <swiper
          v-if="dataList.length !== 0"
          ref="newsListSwiper"
          class="swiper swiper-container"
          :options="newsListSwiperOption"
        >
          <swiper-slide
            v-for="(item, index) in newsDataList"
            :key="`a${index}`"
          >
            <div
              class="swiper-item swiper-no-swiping"
              @click.stop="goToArticleDetailView(item)"
            >
              <div class="title">{{ item.shortName }}</div>
              <img
                class="news-title-hr"
                :src="require('@/assets/images/jjxt/index/news-title-hr.png')"
              >
              <div v-if="item.title.length <= 15" class="news-title">{{ item.title }}</div>
              <el-tooltip v-else effect="dark" :content="item.title" placement="top">
                <div class="news-title">{{ item.title }}</div>
              </el-tooltip>
              <div v-if="!isAutoScrollContent" ref="newsText" class="news-text">
                <div ref="newsTextInner" class="news-text-inner">
                  <div v-html="item.content" />
                </div>
              </div>
              <marquee v-if="isAutoScrollContent" direction="up" scrollamount="2" height="60">
                <div v-html="item.content" />
              </marquee>
            </div>
          </swiper-slide>
          <!-- <div slot="pagination" class="swiper-pagination" /> -->
        </swiper>
      </div>
      <!-- 重要新闻列表 -->

      <div class="lottie-style">
        <lottie :options="defaultOptions" @animCreated="handleAnimation" />
      </div>

      <!-- 轮播图 -->
      <div class="news-img-banner">
        <swiper
          v-if="activeImgDataList.length !== 0"
          class="swiper"
          :class="activeImgDataList.length === 1 ? 'swiper-no-swiping' : ''"
          :options="newsImgswiperOption"
        >
          <swiper-slide
            v-for="(item, index) in activeImgDataList"
            :key="`b${index}`"
          >
            <img
              v-if="activeImgDataList.length !== 0"
              class="img-style"
              width="100%"
              :src="`${vueAppBaseApi}/dfile/file/download?fileUrl=${item.filePath}`"
            >
          </swiper-slide>
          <div slot="pagination" class="swiper-pagination" />
        </swiper>
      </div>
      <!-- 轮播图 -->

      <!-- 重要新闻框 -->
      <div v-if="dataList.length !== 0" class="news-dialog">
        <img style="width: 100%;" :src="require('@/assets/images/jjxt/index/jjxt-index-news-dialog.png')">
      </div>
      <!-- 重要新闻框 -->
    </div>
  </div>
</template>

<script>
import jsonData from '@/assets/jsons/jjxt/map.json';
import { getAllUnitNewsDataList } from '@/api/jjxt';
import { getToken } from '@/utils/auth';
// import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
// import 'swiper/css/swiper.css'
let vm = null;

export default {
  components: {
    // Swiper,
    // SwiperSlide
  },
  data() {
    return {
      hasToken: getToken() && getToken() !== 'undefined',

      // base路径
      vueAppBaseApi: process.env.VUE_APP_BASE_API,

      // 新闻轮播图高度
      newsImgHeight: document.body.clientHeight - 400,

      // 新闻列表轮播当前index
      activeSlide: 0,

      // 是否自动滚动内容
      isAutoScrollContent: false,

      // 当前单位对应图片数组
      activeImgDataList: [],

      // 新闻列表轮播配置
      newsListSwiperOption: {
        direction: 'vertical',
        loop: true,
        speed: 1800,
        slidesPerView: 1,
        spaceBetween: 0,
        mousewheel: true,
        // autoplay: {
        //   delay: 6200,
        //   disableOnInteraction: false
        // },
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        on: {
          // 开始切换时
          slideChangeTransitionStart() {
            vm.activeSlide = this.realIndex;
            vm.isAutoScrollContent = false;
            vm.activeImgDataList = [];
            setTimeout(() => {
              vm.activeImgDataList = vm.newsDataList[vm.activeSlide].imagesList;
            }, 100);
            // if (vm.dataList[vm.activeSlide].imagesList.length === 1) {
            //   vm.newsImgswiperOption.loop = false
            // }
            vm.dealLongContent(); // 处理过长内容
            if (this.realIndex === 7) {
              setTimeout(() => {
                vm.anim.stop();
                vm.anim.play();
              }, 9600);
            }
          }
        }
      },

      // 新闻图片轮播配置
      newsImgswiperOption: {
        direction: 'horizontal',
        loop: true,
        speed: 1800,
        slidesPerView: 1,
        spaceBetween: 0,
        mousewheel: true,
        autoplay: {
          delay: 2500,
          disableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      },

      // lottie配置
      anim: null,
      defaultOptions: { animationData: jsonData },

      // 返回值
      dataList: [],

      // 固定重要新闻数组
      newsDataList: [
        // {
        //   id: '',
        //   publishUnitDeptCode: '001204',
        //   shortName: '怀化供电段',
        //   title: '暂无最新消息',
        //   content: '',
        //   imagesList: [],
        //   viewRange: ''
        // },
        {
          id: '',
          publishUnitDeptCode: '001202',
          shortName: '长沙供电段',
          title: '暂无最新消息',
          content: '',
          imagesList: [],
          viewRange: ''
        }
        // {
        //   id: '',
        //   publishUnitDeptCode: '001205',
        //   shortName: '衡阳供电段',
        //   title: '暂无最新消息',
        //   content: '',
        //   imagesList: [],
        //   viewRange: ''
        // },
        // {
        //   id: '',
        //   publishUnitDeptCode: '',
        //   shortName: '惠州电务段',
        //   title: '暂无最新消息',
        //   content: '',
        //   imagesList: [],
        //   viewRange: ''
        // },
        // {
        //   id: '',
        //   publishUnitDeptCode: '001203',
        //   shortName: '深圳供电段',
        //   title: '暂无最新消息',
        //   content: '',
        //   imagesList: [],
        //   viewRange: ''
        // },
        // {
        //   id: '',
        //   publishUnitDeptCode: '001201',
        //   shortName: '广州供电段',
        //   title: '暂无最新消息',
        //   content: '',
        //   imagesList: [],
        //   viewRange: ''
        // },
        // {
        //   id: '',
        //   publishUnitDeptCode: '',
        //   shortName: '肇庆信号水电段',
        //   title: '暂无最新消息',
        //   content: '',
        //   imagesList: [],
        //   viewRange: ''
        // },
        // {
        //   id: '',
        //   publishUnitDeptCode: '',
        //   shortName: '海口综合维修段',
        //   title: '暂无最新消息',
        //   content: '',
        //   imagesList: [],
        //   viewRange: ''
        // }
      ]
    };
  },
  mounted() {
    vm = this;
    this.anim.setSpeed(0.5);
    this.anim.stop();
    this.anim.goToAndStop(8000, false);
    this.watchPageChangeNewsImgswiper(); // 监听页面大小变化调整轮播图大小
    this.getAllUnitNewsDataList(); // 查询所有单位下的最新新闻
  },
  methods: {
    getToken,

    // 处理过长内容
    dealLongContent() {
      this.$nextTick(() => {
        if (this.$refs.newsText) {
          if (this.$refs.newsText[this.activeSlide].offsetHeight < this.$refs.newsTextInner[this.activeSlide].offsetHeight) {
            this.isAutoScrollContent = true;
          } else {
            this.isAutoScrollContent = false;
          }
        }
      });
    },

    // 监听页面大小变化调整轮播图大小
    watchPageChangeNewsImgswiper() {
      window.onresize = () => {
        return (() => {
          this.newsImgHeight = document.body.clientHeight - 700;
        })();
      };
    },

    // 控制lottie
    handleAnimation(anim) {
      this.anim = anim;
    },

    // 查询所有单位下的最新新闻
    getAllUnitNewsDataList() {
      getAllUnitNewsDataList().then(res => {
        // if (res.data.length === 1) {
        //   this.newsListSwiperOption.loop = false
        // } else {
        //   this.newsListSwiperOption.loop = true
        // }
        this.dataList = res.data;
        this.dataList.forEach(val => {
          this.newsDataList.forEach(innerVal => {
            if (innerVal.publishUnitDeptCode === val.publishUnitDeptCode) {
              innerVal.id = val.id;
              innerVal.title = val.title;
              innerVal.content = val.content;
              innerVal.imagesList = val.imagesList;
              innerVal.viewRange = val.viewRange;
            } else if (innerVal.shortName === val.shortName) {
              innerVal.id = val.id;
              innerVal.title = val.title;
              innerVal.content = val.content;
              innerVal.imagesList = val.imagesList;
              innerVal.viewRange = val.viewRange;
            }
          });
        });
        if (res.data.length !== 0) {
          // if (res.data[this.activeSlide].imagesList.length === 1) {
          //   this.newsImgswiperOption.loop = false
          // } else {
          //   this.newsImgswiperOption.loop = true
          // }
          this.activeImgDataList = this.dataList[this.activeSlide].imagesList;
        }
        this.dealLongContent(); // 处理过长内容
        // this.anim.play()
      });
    },

    // 跳转文章更多页面
    goToArticleMoreView() {
      this.$router.push({ path: '/article-more-view', query: { typeName: '重要新闻' }});
    },

    // 跳转文章详情页面
    goToArticleDetailView(item) {
      if (item.viewRange === 'All') {
        this.$router.push({ path: '/article-detail-view', query: { id: item.id, viewRange: item.viewRange }});
      } else if (this.hasToken) {
        if (item.id) {
          this.$router.push({ path: '/article-detail-view', query: { id: item.id, viewRange: item.viewRange }});
        }
      } else if (!this.hasToken) {
        this.$confirm('系统识别您尚未登录，是否跳转登录页面？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            window.location.assign('/login');
          })
          .catch(() => {});
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.important-news-style {
  position: relative;
  color: white;
  width: 902px;
  box-sizing: border-box;
  .component-inner-div {
    border: 2px solid #122a57;
    height: 100%;
    box-sizing: border-box;
    .title {
      color: #3695FF;
      font-size: 20px;
      padding: 0;
      margin-top: 22px;
      align-items: center;
      display: flex;
      .point-icon {
        background-color: #3695FF;
        height: 10px;
        width: 10px;
        margin: 0 10px 0 17px;
        z-index: 1;
      }
      .title-span {
        z-index: 1;
      }
      .title-background {
        position: absolute;
        left: 0;
      }
      .more-btn {
        position: absolute;
        right: 20px;
        color: #eaea4d;
        font-size: 14px;
        cursor: pointer;
      }
    }
    .news-list-banner {
      position: absolute;
      top: 97px;
      left: 64px;
      width: 302px;
      height: 170px;
      .swiper-slide {
        background-color: transparent;
        .swiper-item {
          padding: 0px 24px 20px 24px;
          .title {
            height: 30px;
            font-size: 16px;
            margin: 0;
            color: #28f7ff;
            align-items: flex-end;
          }
          .news-title-hr {
            margin: 10px 0;
          }
          .news-title {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 14px;
            margin-bottom: 10px;
          }
          .news-text {
            height: 60px;
            font-size: 14px;
            word-wrap: break-word;
            overflow: hidden;
          }
        }
      }
    }
    .lottie-style {
      height: 50%;
    }
    .news-img-banner {
      position: absolute;
      top: 55%;
      bottom: 0;
      width: 100%;
      padding: 20px;
      .img-style {
        height: 100%;
        object-fit: cover;
      }
    }
  }
  .news-dialog {
    position: absolute;
    top: 73px;
    left: 40px;
    width: 350px;
  }
}

.swiper-container {
  width: 100%;
  height: 100%;
}
</style>
